<template>
  <div class="comment">
    <div class="comment-header">评论</div>
    <div class="comment-content">
      <el-timeline v-if="commentList.length > 0">
        <el-timeline-item
          v-for="item in commentList"
          :timestamp="item.create_time"
          placement="top"
        >
          <el-card>
            <div class="card">
              <div>
                <h4>
                  {{ item.userlist[0].name
                  }}<span v-if="item.twouserlist.length > 0"
                    >&nbsp;&nbsp; 评论&nbsp;&nbsp;
                    {{ item.twouserlist[0].name }}</span
                  >
                </h4>
                <br />
                <p>{{ item.content }}</p>
              </div>
              <div class="btn">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  circle
                  @click="commentDialog(item)"
                ></el-button>
                <el-button
                  v-if="userData ? item.userlist[0].id === userData.id : false"
                  @click="del(item.id)"
                  type="danger"
                  icon="el-icon-delete"
                  circle
                ></el-button>
              </div>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <div v-else class="comment-empty">
        <i class="el-icon-info"></i>暂无评论
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="90%">
      <el-input
        type="textarea"
        placeholder="请输入内容"
        v-model="textarea"
        maxlength="300"
        show-word-limit
        rows="3"
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit(two_id)">评价</el-button>
      </span>
    </el-dialog>

    <div class="comment-footer">
      <el-input
        type="textarea"
        placeholder="请输入内容"
        v-model="textarea"
        maxlength="300"
        show-word-limit
        rows="3"
      >
      </el-input>
      <el-button class="comment-btn" @click="handleSubmit()"
        >发送评论</el-button
      >
    </div>
  </div>
</template>

<script>
import {
  getCommentList,
  addComment,
  deletComment,
} from "@/api/interchangeable";
import { transformTimestamp } from "@/tools/utils";
export default {
  name: "Comment",
  props: {
    id: {
      type: String,
      default: "",
    },
    userData: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    userData(val) {
      this.init();
    },
  },
  data() {
    return {
      commentList: [],
      textarea: "",
      dialogVisible: false,
      title: "提示",
    };
  },
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    commentDialog(obj) {
      this.dialogVisible = true;
      this.textarea = "";
      this.two_id = obj.userlist[0].id;
      this.title = "评论" + obj.userlist[0].name + "的评论";
    },
    del(id) {
      deletComment({ id }).then((res) => {
        this.$Toast("删除成功");
        setTimeout(() => {
          this.$emit("refresh", true);
          this.init();
        }, 1000);
      });
    },
    init() {
      if (!this.id) {
        return;
      }
      getCommentList({ goods_id: this.id, two_id: "", user_id: "" }).then(
        (res) => {
          this.commentList = res.data.map((item) => {
            return {
              ...item,
              create_time: transformTimestamp(item.create_time),
            };
          });
        }
      );
    },
    handleSubmit(two_id = "") {
      if (this.textarea.trim() === "") {
        return this.$Toast.fail("评论内容不能为空");
      }
      if (!this.userData) {
        return this.$Toast.fail("请先登录在评论");
      }
      addComment({
        user_id: this.userData.id,
        goods_id: this.id,
        content: this.textarea,
        two_id,
      }).then((res) => {
        this.$Toast("评论成功");
        setTimeout(() => {
          this.$emit("refresh", true);
          this.dialogVisible = false;
          this.init();
          this.textarea = "";
        }, 1000);
      });
    },
  },
};
</script>

<style lang="scss">
.comment {
  width: 100%;
  background: #ffffff;
  display: flex;
  padding: 27px 33px;
  margin-top: 16px;
  flex-direction: column;

  .comment-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.4rem;
  }
  .comment-footer {
    position: relative;
    .el-textarea {
      font-size: 0.24rem;
      .el-textarea__inner {
        padding-right: 1.3rem;
      }
    }
    .comment-btn {
      position: absolute;
      right: 0.1rem;
      font-size: 0.16rem;
      top: 0.2rem;
    }
  }
  .el-textarea .el-input__count {
    font-size: 0.21rem;
  }
  .comment-content {
    .card {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  }
}
.el-message {
  height: 0.5rem;
}
</style>
